<!DOCTYPE html>
<html>

	<head>
		<title>index</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" href="css/weui.min.css">
		<link rel="stylesheet" type="text/css" href="css/jquery-weui.min.css"/>
		<style type="text/css">
			.weui-tabbar{
				position: fixed;
				bottom: 0px;
			}
			.weui-cells__title {
				width: 100%;
				position: fixed;
				top: 0px;
				text-align: center;
				background-color: #E50012;
				margin: 0px;
				padding-top: .77em;
				padding-bottom: .3em;
				color: white;
				margin-bottom: .77em;
			}
			html,
		body {
			background-color: #EEEEEE;
			margin-top: 0.9em;
		}
		
		a {
			color: black;
		}
		#avtorspan {
			background-color: #FE7D00;
			min-height: 160px;
		}
		
		#avtorspan div {
			height: 100px;
			overflow: hidden;
			text-indent: 7em;
			background: url(img/icon_brand_alipay.png) no-repeat;
			background-size: 70px;
			background-position: 20px center;
		}
		
		#avtorspan div p:first-child {
			margin-top: 22px;
			color: white;
			font-size: 20px;
			font-weight: bold;
		}
		
		#avtorspan input {
			width: 70px;
			height: 40px;
			border: 0px;
			outline: none;
			border-radius: 3px;
			background-color: #FFFF00;
			color: #FF0000;
			margin-left: 20px;
			cursor: pointer;
			font-size: 14px;
		}
		
		#content {
			max-width: 640px;
			min-width: 320px;
			margin: 0px auto 60px auto;
		}
		
		.weui-tabbar {
			position: fixed;
		}
		
		.weui-flex {
			background-color: white;
			text-align: center;
		}
		</style>
	</head>

	<body ontouchstart>
		<div class="weui-tab">
			<div class="weui-tab__bd">
				<div id="tab4" class="weui-tab__bd-item weui-tab__bd-item--active">
				<div class="weui-cells__title">个人中心</div>
				<div id="content">
						<!--个人中心-->

						<!--支付宝-->
						<div id="avtorspan">
							<div>
								<p>156*****0314</p>
								<p>普通会员 可用积分0</p>
							</div>
							<input type="button" name="" id="" value="签到">
						</div>
						<!--4个选项卡-->
						<div class="weui-flex">
							<div class="weui-flex__item">
								<div class="placeholder">
									<a href="#"><img src="img/2017-03-18_112844.png">
										<p>待支付</p>
									</a>
								</div>
							</div>
							<div class="weui-flex__item">
								<div class="placeholder">
									<a href="#"><img src="img/2017-03-18_112923.png">
										<p>代发货</p>
									</a>
								</div>
							</div>
							<div class="weui-flex__item">
								<div class="placeholder">
									<a href="#"><img src="img/2017-03-18_112940.png">
										<p>已发货</p>
									</a>
								</div>
							</div>
							<div class="weui-flex__item">
								<div class="placeholder">
									<a href="#"><img src="img/2017-03-18_112951.png">
										<p>已完成</p>
									</a>
								</div>
							</div>
						</div>
						<!--带图文的图标组合!-->
						<div class="weui-panel">
							<div class="weui-panel__bd">
								<div class="weui-media-box weui-media-box_small-appmsg">
									<div class="weui-cells">
										<a class="weui-cell weui-cell_access" href="javascript:;">
											<div class="weui-cell__hd"><img src="img/icon_orders.png" alt="" style="width:30px;margin-right:5px;display:block"></div>
											<div class="weui-cell__bd weui-cell_primary">
												<p>我的订单</p>
											</div>
											<span class="weui-cell__ft"></span>
										</a>
										<a class="weui-cell weui-cell_access" href="javascript:;">
											<div class="weui-cell__hd"><img src="img/icon_brand_alipay.png" alt="" style="width:30px;margin-right:5px;display:block"></div>
											<div class="weui-cell__bd weui-cell_primary">
												<p>设置支付密码</p>
											</div>
											<span class="weui-cell__ft"></span>
										</a>
										<a class="weui-cell weui-cell_access" href="javascript:;">
											<div class="weui-cell__hd"><img src="img/icon_concern.png" alt="" style="width:30px;margin-right:5px;display:block"></div>
											<div class="weui-cell__bd weui-cell_primary">
												<p>我的关注</p>
											</div>
											<span class="weui-cell__ft"></span>
										</a>
										<a class="weui-cell weui-cell_access" href="javascript:;">
											<div class="weui-cell__hd"><img src="img/icon_integral.png" alt="" style="width:30px;margin-right:5px;display:block"></div>
											<div class="weui-cell__bd weui-cell_primary">
												<p>我的评价</p>
											</div>
											<span class="weui-cell__ft"></span>
										</a>
									</div>
								</div>
							</div>
						</div>
						<div class="weui-panel">
							<div class="weui-panel__bd">
								<div class="weui-media-box weui-media-box_small-appmsg">
									<div class="weui-cells">
										<a class="weui-cell weui-cell_access" href="javascript:;">
											<div class="weui-cell__hd"><img src="img/icon_coupon.png" alt="" style="width:30px;margin-right:5px;display:block"></div>
											<div class="weui-cell__bd weui-cell_primary">
												<p>我的优惠券</p>
											</div>
											<span class="weui-cell__ft"></span>
										</a>
										<a class="weui-cell weui-cell_access" href="javascript:;">
											<div class="weui-cell__hd"><img src="img/icon_nav_city.png" alt="" style="width:30px;margin-right:5px;display:block"></div>
											<div class="weui-cell__bd weui-cell_primary">
												<p>收货地址</p>
											</div>
											<span class="weui-cell__ft"></span>
										</a>
									</div>
								</div>
							</div>
						</div>
						<div class="weui-panel">
							<div class="weui-panel__bd">
								<div class="weui-media-box weui-media-box_small-appmsg">
									<div class="weui-cells">
										<a class="weui-cell weui-cell_access" href="javascript:;">
											<div class="weui-cell__hd"><img src="img/icon_brand_qq.png" alt="" style="width:30px;margin-right:5px;display:block"></div>
											<div class="weui-cell__bd weui-cell_primary">
												<p>积分商城</p>
											</div>
											<span class="weui-cell__ft"></span>
										</a>
										<a class="weui-cell weui-cell_access" href="javascript:;">
											<div class="weui-cell__hd"><img src="img/icon_brand_weibo.png" alt="" style="width:30px;margin-right:5px;display:block"></div>
											<div class="weui-cell__bd weui-cell_primary">
												<p>周四“会”生活</p>
											</div>
											<span class="weui-cell__ft"></span>
										</a>
									</div>
								</div>
							</div>
						</div>
						<div class="weui-panel">
							<div class="weui-panel__bd">
								<div class="weui-media-box weui-media-box_small-appmsg">
									<div class="weui-cells">
										<a class="weui-cell weui-cell_access" href="javascript:;">
											<div class="weui-cell__hd"><img src="img/icon_nav_picker.png" alt="" style="width:30px;margin-right:5px;display:block"></div>
											<div class="weui-cell__bd weui-cell_primary">
												<p>咨询电话400-1177-517</p>
											</div>
											<span class="weui-cell__ft"></span>
										</a>
									</div>
								</div>
							</div>
						</div>
						<div class="weui-panel">
							<div class="weui-panel__bd">
								<div class="weui-media-box weui-media-box_small-appmsg">
									<div class="weui-cells">
										<a class="weui-cell weui-cell_access" href="javascript:;">
											<div class="weui-cell__hd"><img src="img/image_characters.png" alt="" style="width:30px;margin-right:5px;display:block"></div>
											<div class="weui-cell__bd weui-cell_primary">
												<p>在线客服</p>
											</div>
											<span class="weui-cell__ft"></span>
										</a>
									</div>
								</div>
							</div>
						</div>
						<!--内容-->
					</div>
				</div>
			</div>

			<div class="weui-tabbar">
				<a href="index.html" class="weui-tabbar__item">
					<div class="weui-tabbar__icon">
						<img src="./images/icon_nav_button.png" alt="">
					</div>
					<p class="weui-tabbar__label">首页</p>
				</a>
				<a href="lists.html" class="weui-tabbar__item">
					<div class="weui-tabbar__icon">
						<img src="./images/icon_nav_msg.png" alt="">
					</div>
					<p class="weui-tabbar__label">分类</p>
				</a>
				<a href="car.html" class="weui-tabbar__item">
					<div class="weui-tabbar__icon">
						<img src="./images/icon_nav_article.png" alt="">
					</div>
					<p class="weui-tabbar__label">购物车</p>
				</a>
				<a href="mineHome.html" class="weui-tabbar__item weui-bar__item--on">
					<div class="weui-tabbar__icon">
						<img src="./images/icon_nav_cell.png" alt="">
					</div>
					<p class="weui-tabbar__label">我的良品</p>
				</a>
			</div>
		</div>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/fastclick.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>